<script>
import {defineComponent} from 'vue'
import axios from "axios";



export default defineComponent({
    name: "classModule",
    props: {
        item: [Object]
    },
    data(){
        return{
            freeList :'',
            boutiqueList:'',
            discountList:''

        }
    },
    methods:{
        getList(type){
            let url = new URLSearchParams()
            url.append('type',type)
            url.append('pageSize',5)
            url.append('pageNum',1)
            return axios.post('http://1.117.81.216:8087/weChat/applet/course/list/type', url)
        },

    },
    created() {
        this.getList('free').then(res=>{
            if (res.data.code ===0){
                this.freeList = res.data.rows
                console.log(this.freeList)
            }
        })
        this.getList('boutique').then(res=>{
            if (res.data.code ===0){
                this.boutiqueList = res.data.rows
            }
        })
        this.getList('discount').then(res=>{
            if (res.data.code ===0){
                this.discountList = res.data.rows
                console.log(this.discountList)
            }
        })
    }

})
</script>

<template>
<div class="class">
    <div class="sub-container">
        <div class="phone-class-list" >
            <!-- 标题 -->
            <div class="sub-top-title">
                <img
                        src=""
                        alt=""
                        class="title-icon"
                />
                <span class="title-course">免费课程</span>
                <span class="more-course"
                ><a href="/other/search?type=free" class="" style="color: #999">
                更多
                <i
                        aria-label="icon: right-circle"
                        class="anticon anticon-right-circle"
                ><svg
                        viewBox="64 64 896 896"
                        data-icon="right-circle"
                        width="1em"
                        height="1em"
                        fill="currentColor"
                        aria-hidden="true"
                        focusable="false"
                        class=""
                >
                    <path
                            d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"
                    ></path>
                    <path
                            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                    ></path></svg></i></a
                ></span>
            </div>
            <!-- 内容 -->

            <div class="classes" v-for="(item) in this.freeList" :key="item.courseId">
                <router-link :to="{path:'/detail',query:{item}}">
                <img class="bannerimg" :src="item.bannerFileUrl">
                <div class="container">{{item.courseSubtitle}}</div>
                <p class = 'container2'>共{{item.subSectionNum}}节课|{{item.learningNum}}人报名</p>
                <div class='container3' v-if="'item.isFree == 1'"><b style="color:green">免费</b></div>
                <div class='container3' v-else><span style="color:red;">￥{{item.discountPrice}}</span> <del style="color:gray">￥{{item.coursePrice}}</del> <span class='reality'>{{item.discountDesc}}</span></div>
                </router-link>
            </div>

        </div>
    </div>
    <div class="sub-container">
        <div class="phone-class-list" >
            <!-- 标题 -->
            <div class="sub-top-title">
                <img
                    src="https://course.myhope365.com/img/boutique-icon.6d982741.png"
                    alt=""
                    class="title-icon"
                />
                <span class="title-course">精品课程</span>
                <img
                    class="title-img"
                    src="https://course.myhope365.com/img/vip-free.aa229615.png"
                    alt=""
                />
                <span class="more-course"
                ><a href="/other/search?type=free" class="" style="color: #999">
                更多
                <i
                    aria-label="icon: right-circle"
                    class="anticon anticon-right-circle"
                ><svg
                    viewBox="64 64 896 896"
                    data-icon="right-circle"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                >
                    <path
                        d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"
                    ></path>
                    <path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                    ></path></svg></i></a
                ></span>
            </div>
                <div  class="classes" v-for="(item) in this.boutiqueList" :key="item.courseId">
                    <router-link :to="{path:'/detail',query:{item}}">
                    <img class="bannerimg" :src="item.bannerFileUrl">
                    <div class="container">{{item.courseTitle}}</div>
                    <p class = 'container2'>共{{item.subSectionNum}}节课|{{item.learningNum}}人报名</p>
                    <div class='container3' v-if="item.isFree == 1"><b style="color:green">免费</b></div>
                    <div class='container3' v-else><span style="color:red;">￥{{item.discountPrice}}</span> <del style="color:gray">￥{{item.coursePrice}}</del> <span class='reality'>{{item.discountDesc}}</span></div>
                    </router-link>
                </div>
        </div>
    </div>
    <div class="sub-container">
        <div class="phone-class-list" >
            <!-- 标题 -->
            <div class="sub-top-title">
                <img
                    src="https://course.myhope365.com/img/time-limit-icon.12673615.png"
                    alt=""
                    class="title-icon"
                />
                <span class="title-course">限时折扣课程 </span>
                <img
                    class="title-img"
                    src="https://course.myhope365.com/img/vip-free.aa229615.png"
                    alt=""
                />
                <span class="more-course"
                ><a href="/other/search?type=free" class="" style="color: #999">
                更多
                <i
                    aria-label="icon: right-circle"
                    class="anticon anticon-right-circle"
                ><svg
                    viewBox="64 64 896 896"
                    data-icon="right-circle"
                    width="1em"
                    height="1em"
                    fill="currentColor"
                    aria-hidden="true"
                    focusable="false"
                    class=""
                >
                    <path
                        d="M666.7 505.5l-246-178A8 8 0 0 0 408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"
                    ></path>
                    <path
                        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                    ></path></svg></i></a
                ></span>
            </div>

            <router-link :to="{path:'/detail',query:{item}}">
            <div class="classes" v-for="(item) in this.discountList" :key="item.courseId">
                <img class="bannerimg" :src="item.bannerFileUrl">
                <div class="container">{{item.courseTitle}}</div>
                <p class = 'container2'>共{{item.subSectionNum}}节课|{{item.learningNum}}人报名</p>
                <div class='container3'><span style="color:red;">￥{{item.discountPrice}}</span> <del style="color:gray">￥{{item.coursePrice}}</del> <span class='reality'>限时特惠</span></div>
            </div>
            </router-link>
        </div>
    </div>

</div>
</template>

<style scoped lang="less">
.class{
  height: 1000px;
}
.sub-container{
  width: 1110px;
  height: 300px;
  background: #fff;
  padding: 30px 20px;
  margin: 15px auto 0;
  border-radius: 20px;
}
.sub-container > .phone-class-list{
  margin-left: -8px;
  margin-right: -8px;
  position: relative;
  height: auto;

}
.sub-container > .phone-class-list>.sub-top-title{
  display: flex;
  align-items: center;
  font-size: 24px;
  padding: 0 12px 10px 0;
  border-bottom: 2px solid #e8e8e8;
}
.sub-container > .phone-class-list>.sub-top-title >.title-icon{
  width: 38px!important;
  margin-right: 15px;
}
.sub-container > .phone-class-list>.sub-top-title >.title-img{
  margin-left: 8px;
  width: 93px;
}
.sub-container > .phone-class-list>.sub-top-title >.title-course{
  font-weight: 600;
}
.sub-container > .phone-class-list>.sub-top-title >.more-course{
  font-size: 16px;
  line-height: 34px;
  margin-left: auto;
}
/* 内容 */
.container{
  margin-left: 10px;
  margin-bottom: 6px;
  font-weight: 500;
  color: #000;
    white-space: nowrap;
    overflow: hidden;
}
.container2{
  font-size: 14px;
  margin-left: 10px;
  margin-bottom: 6px;
  color: #b7bbc4;
  height: 22px;
  font-weight: 500;
}
.container3{
  margin-left: 10px;
}
.reality{
  margin-right: 10px;
  color: #fa8c16;
  background: #fff7e6;
  border-color: #ffd591;
  float: right;
  height: 22px;
  margin-right: 8px;
  padding: 0 7px;
  font-size: 12px;
  line-height: 20px;
  border: 1px solid #fa8c16;
}
.classes{
  width: 19%;
  background: #fff;
  -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.15);
  box-shadow: 0 4px 10px 0 rgba(0,0,0,.15);
  border-radius: 10px;
  float: left;
  margin: 14px 0.5% 2px;
    padding: 6px;
}
.bannerimg{
  width: 200px;
  height: 100px;
  border-radius: 10px 10px 0 0;
}

</style>